<template>
  <div class="con-staff">
    <div id="searchbox">
      <Form ref="formInline" :model="formInline" inline>
        <FormItem prop="user">
          <Input type="text" v-model="formInline.user" placeholder="姓名">
            <Icon type="ios-person-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="handleSubmit('formInline')"
            >Search</Button
          >
        </FormItem>
      </Form>
    </div>

    <Table
      highlight-row
      border
      stripe
      :columns="column1"
      :data="data2"
      @on-current-change="xsjl"
    >
      <template slot-scope="{ row }" slot="name"
        ><strong>{{ row.name }}</strong></template
      >
      <!-- <template slot-scope="{row}" slot="sex">{{row.sex | bpos}}</template> -->
      <template slot-scope="{ row, index }" slot="action">
        <Button
          type="primary"
          size="small"
          style="margin-right: 5px"
          @click="Change(row, index)"
          >修改</Button
        >
        <Button
          type="primary"
          size="small"
          style="margin-right: 5px"
          @click="Remove(index)"
          >删除</Button
        >
      </template>
    </Table>
    <div style="margin: 10px; overflow: hidden">
      <div style="float: right">
        <Page :total="totalpage" :current="1" @on-change="changePage"></Page>
      </div>
    </div>

    <div id="xg">
      <lp v-bind:olddata="to_children" @receive="receive" @update="update"></lp>
    </div>
  </div>
</template>

<script>
import lp from "./Lp.vue";
export default {
  data() {
    return {
      jls: false,
      split1: 0.65,
      info: {},
      totalpage: 100,
      modal_loading: true,
      BaseURL: "/api/staff/",
      formInline: {
        user: "",
        // age:""
      },
      to_children: {
        name: "",
        sex: "",
        email: "",
        url: "",
        num: "",
        show_change_table: false,
      },
      inputs: [],
      column1: [
        {
          type: "index",
          width: 60,
          align: "center",
        },
        {
          title: "姓名",
          key: "name",
          slot: "name",
          align: "center",
        },
        {
          title: "身份证号",
          key: "idcard",
          // slot: "sex",
          align: "center",
          // filters: [{
          // 		label: "男性",
          // 		value: 1
          // 	},
          // 	{
          // 		label: "女性",
          // 		value: 0
          // 	}
          // ],
          // filtersMultiple: false,
          // filterMethod(value, row) {
          // 	if (value == 1) {
          // 		return row.sex == true
          // 	} else if (value == 0) {
          // 		return row.sex == false
          // 	}
          // }
        },
        {
          title: "手机",
          key: "phone",
          align: "center",
        },
        {
          title: "创建时间",
          key: "time",
          sortable: true,
          align: "center",
        },
        {
          title: "action",
          slot: "action",
          width: 150,
          align: "center",
        },
      ],
      data2: [],
      datas: [],
    };
  },
  components: {
    lp,
  },
  filters: {
    bpos: function (value) {
      if (value == true) {
        return "男";
      } else {
        return "女";
      }
    },
  },
  mounted: function () {
    var url = this.BaseURL + "&";
    this.axios
      .get(url)
      .then((res) => {
        this.inputs = res.data;
        this.data2 = this.inputs.slice(0, 14);
        // this.total = this.inputs.length;
        this.info = {
          name: this.data2[0].name,
          sex: this.data2[0].sex,
          email: this.data2[0].email,
          birthday: this.data2[0].time,
          phone: "15903109381",
          address: "大名县",
          position: "管理员",
          imgstr: this.data2[0].name,
        };
      })
      .catch((e) => {
        this.$Message.info(e);
      });
  },
  methods: {
    Change: function (row, index) {
      var url = this.BaseURL + row.phone + "&";
      this.to_children.name = row.name;
      this.to_children.idcard = row.idcard;
      this.to_children.phone = row.phone;
      this.to_children.url = url;
      this.to_children.num = index;
      this.to_children.show_change_table = true;
    },
    Remove: function (index) {
      var url = this.BaseURL + this.data2[index].email + "&";
      this.axios
        .delete(url)
        .then((r) => {
          this.$Message.info("删除成功");
          this.data2.splice(index, 1);
          console.log(r);
        })
        .catch((error) => {
          this.$Message.info(error);
        });
    },
    handleSubmit: function () {
      if (this.formInline.user) {
        var indexs = [];
        // var l=0
        for (var it in this.inputs) {
          if (this.inputs[it].name == this.formInline.user) {
            indexs.push(it);
            // l+=1
          }
        }
        if (indexs == undefined || indexs.length <= 0) {
          this.data2 = [];
        } else {
          // this.data2.splice(0,this.data2.length,)
          this.data2 = [];

          for (it in indexs) {
            this.data2.push(this.inputs[indexs[it]]);
          }
          // this.data2=this.inputs.slice(indexs)
        }
      } else {
        this.data2 = this.inputs;
      }
    },

    receive: function (value) {
      this.to_children.show_change_table = value;
    },
    update: function (value) {
      if (value.update) {
        // this.$Message.info("this is row:"+value.index)
        // this.data2.splice(value.index,newdata)
        var newdata = {
          name: value.newdata.name,
          sex: value.newdata.sex,
          email: value.newdata.email,
          time: this.data2[value.index].time,
        };
        // this.data2[value.index]=newdata
        // this.data2.splice(value.index,newdata)
        this.$set(this.data2, value.index, newdata);
      } else {
        this.data2.push(value.newdata);
      }
    },
    xsjl(current) {
      this.info = {
        name: current.name,
        sex: current.sex,
        email: current.email,
        birthday: current.time,
        phone: "15903109381",
        address: "大名县",
        position: "管理员",
        imgstr: current.name,
      };
    },
    changePage(pages) {
      var start = (pages - 1) * 15;
      this.data2 = this.inputs.slice(start, start + 14);
    },
  },
};
</script>

<style>
.demo-split {
  border: 1px solid #dcdee2;
}

.demo-split-pane {
  padding: 10px;
}
</style>
